<template>
  <div class="tets_box">
    <h3>1 深克隆 浅克隆</h3>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

import { deepClone } from '../utils/common';
// 通过消息通道 实现克隆
let objgg = {
  name: 'zs',
  other: {
    name: 'dss',
    age: 45
  }
};

//isValidKey  当前属性名 key 是否在对象 object 里面
// const isValidKey = (key, object) => {
//   return key in object;
// };
// 克隆自己写
// const deepClone = (value) => {
//   // console.log(Object.prototype.toString.call(value));
//   // console.log(Array.isArray(value));
//   //判断值是数组情况  或者 Object.prototype.toString.call(value)==='[object Array]'
//   if (Array.isArray(value)) {
//     let newArr = [];
//     for (let i = 0; i < value.length; i++) {
//       newArr[i] = deepClone(value[i]);
//     }
//     return newArr;
//   }

//   // 非原始值情况 且是对象情况
//   if (Object.prototype.toString.call(value) === '[object Object]') {
//     const newObj = {};
//     // for in 遍历对象   key代表每项的属性名
//     for (let key in value) {
//       // 当前属性名是否在对象里
//       if (isValidKey(key, value)) {
//         newObj[key] = deepClone(value[key]);
//       }
//     }
//     return newObj;
//   }
//   return value;
// };

onMounted(async () => {
  let dd = await deepClone(objgg);
  console.log(dd);
  console.log(objgg == dd);
  dd.name = '5967848949';
  console.log(dd);
  console.log(objgg);
  console.log('iiiii');
});
</script>
